
<!--规格列表-->
<template>
<div>
 <suk-add></suk-add>
 <div class="sku">
  <a-table 
  :columns="sukClass.data.columns.length>0 ? sukClass.data.columns : sukClass.data.columnsDefault" 
  :data-source="sukClass.data.skuInfo"
  :pagination="false"
   bordered
   :showHeader="true"
   :scroll="{ x: 'calc(700px + 50%)', y: 240 }"
   >
    

    <template #name="{ text }">
      <a>{{ text }}</a>
    </template>

      <template #skuImgs="{ record }">
            <a-upload
                    v-model:file-list="imgUpload.fileList"
                    name="avatar"
                    list-type="picture-card"
                    class="avatar-uploader"
                    :show-upload-list="false"
                    :before-upload="imgUpload.beforeUpload"
                    :multiple="true"
                  >
                    <img v-if="imgUpload.imageUrl" style="width:60px;" :src="imgUpload.imageUrl" alt="avatar" />
                    <div v-else>
                      <loading-outlined v-if="imgUpload.loading"></loading-outlined>
                      <plus-outlined v-else></plus-outlined>
                      <div class="ant-upload-text">添加规格图片</div>
                    </div>
            </a-upload>
        </template>
        
        
        
         <template #isdefault="{ record }">
            <a-switch v-model:checked="record.isdefault" />
        </template> 

        <template #state="{ record }">
            <div>{{Boolean(record.state)?"已上架":"已下架"}}</div>
            <a-switch v-model:checked="record.state" />
        </template> 

      

      <template v-for="col in sukClass.data.cols" #[col]="{ text, record }" :key="col">
        <a-input
          v-if="editableData[record.key]"
          v-model:value="editableData[record.key][col]"
          style="margin:-5px 0"
        />
        <template v-else>{{ text }}</template>
    </template>
    

    <template #action="{ record }">
          <div style="display: flex;" v-if="editableData[record.key]">
            <a-tag @click="save(record.key)" color="#108ee9">修改</a-tag>
            <a-popconfirm 
              title="你确定要取消修改吗?" 
              ok-text="确定"
              cancel-text="取消"
              @confirm="cancel(record.key)">
              <a-tag color="#87d068">取消</a-tag>
            </a-popconfirm>
          </div>
          <a-tag v-else @click="edit(record.key)" color="#f50">编辑</a-tag>
    </template>


  </a-table>

  </div>
 </div> 
</template>
<script lang="ts">
import { cloneDeep } from 'lodash-es';
import { defineComponent, reactive, ref, UnwrapRef } from 'vue';
import {PlusOutlined,LoadingOutlined} from '@ant-design/icons-vue';
import { Table,Input,Tag,Popconfirm,Upload,Switch} from "ant-design-vue";

import {imgUpload} from "@/class/upload.ts"
import {sukClass} from "@/modules/goods/addSuk.ts"


import sukAdd from  "./skuAdd.vue";


export default defineComponent({
  components: {
      [Table.name]:Table,
      [Tag.name]:Tag,
      [Input.name]:Input,
      [Popconfirm.name]:Popconfirm,
      [Upload.name]:Upload,
      [Switch.name]:Switch,
      PlusOutlined,
      LoadingOutlined,
      sukAdd
   },
  setup() {
    const editableData=reactive({});//编辑的数据

    const edit = (key: string) => {//编辑
      const state=sukClass.data.skuInfo;
      editableData[key] = cloneDeep(state.filter(item => key === item.key)[0]);
    };

    const save = (key: string) => { //修改
      const state=sukClass.data.skuInfo;
      Object.assign(state.filter(item => key === item.key)[0], editableData[key]);
      let obj=editableData[key];
      delete editableData[key];
      let suklist=sukClass.data.suklist[obj.keys];
          suklist.valueList[obj.keys?obj.del2:obj.del].value=obj[suklist.eName];

          //整体表数修改一下
          if(obj.keys){
            sukClass.data.skuInfo.forEach(element => {
                if(element.keys && element.del2==obj.del2) {
                    element[suklist.eName]=obj[suklist.eName]
                }
            });
           }
       sukClass.data.skuInfoCache=sukClass.data.skuInfo;     
    };

    const cancel = (key: string) => { //取消
      delete editableData[key];
    };

    return {
      editableData,
      edit,
      save,
      cancel,
      sukClass,
      imgUpload
    };
  },
});
</script>
<style lang="scss" scoped>
.editable-row-operations a {
  margin-right: 8px;
}
.sku{
   width:100%;
   background: #f5f5f5;
   padding:20px;
   overflow-x: scroll;
}
.red{
  color: #f40;
  cursor: pointer;
}
</style>